import {createContext,useContext,useState} from 'react'

const Context=createContext()

function Foo(){
    return (
        <div>
            <Bar></Bar>
        </div>
    )
}
function Bar(){
    const name=useContext(Context)
    return (
        <div>Bar----{name}</div>
    )
}
function Text(){
    return (
        <div>
            <Bar></Bar>
        </div>
    )
}
function useContextHook(props){
    const [name,setName]=useState('fieemiracle')
    return(
        <Context.Provider value={name}>
            <Foo></Foo>
            <button onClick={()=>{setName('hlx')}}>change name</button>
        </Context.Provider>
    )
}

export default useContextHook